<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>库内管理</el-breadcrumb-item>
      <el-breadcrumb-item>上架</el-breadcrumb-item>
    </el-breadcrumb>
    <el-container>
      <el-main>
        <div id="formDiv">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品编码" prop="commoditybar">
              <el-select
                v-model="ruleForm.commoditybar"
                placeholder="请输入商品编码"
              >
                <el-option
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                  v-for="item in test"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="货位编码" prop="locatorcode">
              <el-select
                v-model="ruleForm.locatorcode"
                placeholder="请输入货位编码"
              >
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="原货位编码" prop="oldlocatorcode">
              <el-select
                v-model="ruleForm.oldlocatorcode"
                placeholder="请输入原货位编码"
              >
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数量" prop="num">
              <el-input v-model="ruleForm.num"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-plus" @click="submitForm('ruleForm')"
                >上架</el-button
              >
              <el-button type="primary" @click="resetForm('ruleForm')" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        commoditybar: "",
        num: "",
        locatorcode: "",
        oldlocatorcode: "",
      },

      test: [
        { id: 1, value: "值1" },
        { id: 2, value: "值2" },
      ], //下拉测试数据，到时候换成自己的就行

      rules: {
        commoditybar: [
          { required: true, message: "请输入商品编码", trigger: "change" },
        ],
        locatorcode: [
          { required: true, message: "请输入货位编码", trigger: "change" },
        ],
        oldlocatorcode: [
          { required: true, message: "请输入原货位编码", trigger: "change" },
        ],
        num: [{ required: true, message: "请输入商品数量", trigger: "blur" }],
      },

      commodity: {},

    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          axios
            .post("", commodity)
            .then(function (response) {
              app.$message({
                message: response.data.message,
                type: "success",
              });
            })
            .catch(function (error) {
              app.$message({
                message: error.data.message,
                type: "error",
              });
            }); //插入库存记录表

          axios
            .post("", commodity)
            .then(function (response) {
              app.$message({
                message: response.data.message,
                type: "success",
              });
            })
            .catch(function (error) {
              app.$message({
                message: error.data.message,
                type: "error",
              });
            }); //插入上架记录表

          this.resetForm(formName);
        } else {
          console.log("error submit!!");
          return false;
          this.resetForm(formName);
        }
      });
    }, //上架按钮点击

    resetForm(formName) {
      this.$refs[formName].resetFields();
    }, //重置表单

    commoditybarSelect(warehouseid) {
      axios
        .get("" + warehouseid)
        .then(function (response) {
          this.test = response.data; //将查询到的数据赋值给test
        })
        .catch(function (error) {});
    }, //商品编码下拉

    locatorcodeSelect() {
      //同上
    }, //货位编码下拉

    oldlocatorcodeSelect() {
      //同上
    }, //原货位编码下拉
  },

  mounted: function () {
    this.commoditybarSelect();
    this.locatorcodeSelect();
    this.oldlocatorcodeSelect();
  },
};
</script>

<style scoped>
  .el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
  }
  #formDiv{
    width: 300px;
    margin-top: 130px;
    margin-left: 400px;
  }
</style>